<template>
  <div>
    <el-dialog title="新增工作模式" :visible="visible" @close="$emit('update:visible',false)">
      <el-tabs>
        <!-- 礼拜制度 -->
        <el-tab-pane label="礼拜制">
          <el-form
            :inline="true"
            label-width="120px"
            style="margin-top: 20px"
            label-position="right"
          >
            <el-form-item label="工作名称:">
              <el-input placeholder="请填写工作模式名称" />
            </el-form-item>
            <el-form-item label="连续工作天数">
              <el-checkbox-group v-model="workPatternForm.checkbox" size="medium">
                <el-checkbox v-for="item in week" :key="item" :label="item">{{ item }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="工作时间">
              <el-time-picker
                v-model="workPatternForm.time"
                arrow-control
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              />
            </el-form-item>
            <el-row type="flex" justify="center">
              <el-button>确认</el-button>
              <el-button class="cancel" @click="$emit('update:visible',false)">取消</el-button>
            </el-row>
          </el-form>
        </el-tab-pane>
        <!-- 连续制度 -->
        <el-tab-pane label="连续制">
          <el-form
            :inline="true"
            label-width="120px"
            style="margin-top: 20px"
            label-position="right"
          >
            <el-form-item label="工作名称:">
              <el-input placeholder="请填写工作模式名称" />
            </el-form-item>
            <el-form-item label="连续工作天数:">
              <el-form-item label="上" label-width="20px" class="little">
                <el-input placeholder="请输入">
                  <template #suffix>
                    <span>天</span>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="休" label-width="20px" class="little">
                <el-input placeholder="请输入">
                  <template #suffix>
                    <span>天</span>
                  </template>
                </el-input>
              </el-form-item>
            </el-form-item>
            <el-form-item label="工作时间">
              <el-time-picker
                v-model="workPatternForm.time"
                arrow-control
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
              />
            </el-form-item>
            <el-row type="flex" justify="center">
              <el-button>确认</el-button>
              <el-button class="cancel" @click="$emit('update:visible',false)">取消</el-button>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: null
    }
  },
  data() {
    return {
      week: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
      workPatternForm: {
        // 星期
        checkbox: [],
        // 时间
        time: [new Date(2023, 6, 30, 8, 40), new Date(2023, 6, 30, 9, 40)]
      }
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 30px 60px 0;
}

::v-deep .el-input__suffix-inner {
  color: rgb(32, 35, 42);
  font-weight: 400;
  font-size: 14px;
  margin-right: 14px;
}

::v-deep .el-button {
  margin-top: 10px;
  background-color: #e15536;
  color: #fff;
  width: 90px;
  border-radius: 5px;
  font-weight: 400;
  border: 1px solid #e15536;
  margin-bottom: 30px;
}

.cancel {
  background-color: #ffffff;
  color: black;
  border: 1px solid black;
}

::v-deep .el-tabs__nav {
  margin-left: 30px;
}

::v-deep .el-tabs__item.is-active {
  color: #20232a;
  font-size: 16px;
  font-weight: 700;
}

::v-deep .el-checkbox-group {
  width: 450px;

  .el-checkbox {
    margin-right: 10px;
  }
}

::v-deep .el-range-editor.el-input__inner {
  width: 450px !important;
}

::v-deep .el-input__inner {
  width: 450px;
}

::v-deep .little .el-input__inner {
  width: 110px;
}
::v-deep .el-checkbox__label {
    display: inline-block;
    padding-left: 10px;
    line-height: 10px;
    font-size: 14px;
    color: #606266;
    // font-weight: 200px;
    font-size: 10px;
    margin-right: -6px;
    // margin-right: 10px;
}
</style>
